<template>
  <!-- 头部工具栏 -->
  <header class="v-chat-im-tools">
    <el-popover
      v-for="(item, i) in tools"
      :key="i"
      ref="popoverRef"
      placement="top"
      :width="364"
      effect="light"
      trigger="click"
      :disabled="item.key != 'emoji'"
    >
      <template #reference>
        <div class="v-chat-im-tools-item" @click="handlerClick(item)">
          <i :class="`iconfont ${item.icon}`"></i>
        </div>
      </template>
      <div class="v-chat-im-popover-content">
        <ul class="v-chat-im-emoji-list">
          <li v-for="(em, index) in emoOptions" :key="index + 'emoji'" @click="onClickEmoji(em, i)">
            <img :src="getEmoji(em.value)" alt="" />
          </li>
        </ul>
      </div>
    </el-popover>
    <RecordingMedia v-model="showMedia" />
  </header>
</template>

<script setup lang="ts">
import RecordingMedia from './RecordingMedia.vue'
import { tools } from '../config'
import { emoOptions, getEmoji } from '@renderer/utils/emotion'
const emits = defineEmits(['onClickEmoji'])
const showMedia = ref(false)
const onClickEmoji = (em, i) => {
  emits('onClickEmoji', em, i)
}
const handlerClick = (data: any) => {
  if (data.key === 'video') {
    showMedia.value = true
  } else if (data.key === 'audio') {
    showMedia.value = true
  }
}
</script>

<style lang="scss">
.v-chat-im-tools {
  display: flex;
  &-item {
    cursor: pointer;
    i {
      font-size: 20px;
    }
    margin-right: 8px;
  }
}
.v-chat-im-emoji-list {
  display: flex;
  flex-wrap: wrap;
  li {
    padding: 7px;
    img {
      width: 28px;
      cursor: pointer;
    }
  }
}
</style>
